<template>
  <el-row gutter='20' style='height: 60px'>
    <el-button type='primary'>接入集群</el-button>
  </el-row>
  <el-row gutter='20'>
    <el-table :data='tableData' style='width: 100%'>
      <el-table-column prop='clusterId' label='集群ID' sortable width='180' />
      <el-table-column prop='clusterName' label='集群名称' sortable width='180' />
      <el-table-column prop='topicCnt' label='Topic数量' />
      <el-table-column prop='brokerCnt' label='Broker数量' sortable />
      <el-table-column prop='consumerCnt' label='消费者数量' />
      <el-table-column prop='regionCnt' label='Region数量' />
      <el-table-column prop='controllerId' label='ControllerId' />
      <el-table-column prop='monitorStatus' label='监控状态' />
      <el-table-column prop='operation' label='操作' />
    </el-table>
  </el-row>
</template>

<script lang='ts'>
import { Options, Vue } from 'vue-class-component';
import {
  Location, Document, Menu as IconMenu, Setting,
} from '@element-plus/icons-vue';
import { ClusterInfo } from '@/types/kafka-admin/cluster-types';

@Options({
  components: {
    Location,
    Document,
    IconMenu,
    Setting,
  },
})
export default class ClusterManagement extends Vue {
  private tableData: ClusterInfo[] = [];
}
</script>

<style scoped>

</style>
